<template>
  <div class="bottom_chart_boxes" ref="chanye">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['data'],
  data() {
    return {
      data1: this.$props.data.map(item => item.value),
      xData: this.$props.data.map(item => item.name),
    }
  },
  methods: {
    initChanYeChart() {
      const myBottomChartDom = this.$refs.chanye
      const myBottomChart = echarts.init(myBottomChartDom)
      let option = {
        title: [
          {
            text: '项目数(前5)',
            left: '8%',
            top: '5%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 15,
            },
          },
          {
            text: '单位:个',
            right: '10%',
            top: '5%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 14,
              fontWeight: 'normal',
            },
          },
        ],
        grid: {
          left: '17%',
          right: '10%',
          top: '25%',
          bottom: '12%',
        },
        backgroundColor: 'rgb(235, 246, 253)',
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          data: this.xData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            color: 'black',
            margin: 10, //刻度标签与轴线之间的距离。
            interval: 0,
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgb(212,234,239)',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'black',
            formatter: function (value) {
              return value;
            }
          }
        },
        series: [{
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgba(46,105,221,1)' }, { offset: 1, color: 'rgba(81,225,191,1)' }])
          },
          barWidth: 12,
          data: this.data1,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}', // 显示柱状图数据
            fontSize: 12,
            color: 'rgb(39,96,152)',
          },
        }]
      };
      myBottomChart.setOption(option)
    }
  },
  mounted() {
    this.initChanYeChart()
  }
}
</script>

<style scoped></style>